<div id="sArticle">

    <div class="panel panel-default">
        <div class="panel-body">

            <form class="form-inline">
                <a class="btn-success btn" href="/user_aArticle">
                    <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
                    添加文章
                </a>


                <div class="btn-group">
                    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"
                            aria-haspopup="true" aria-expanded="false">
                        分类:{{article.limit["class"]}} <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu">
                        <li><a
                                ng-click="article.changeLimit('class',null)">全部分类</a>
                        </li>
                        <li ng-repeat="class in article.classData"><a
                                ng-click="article.changeLimit('class',class.class_id)">{{class.class_name}}</a>
                        </li>

                    </ul>
                </div>

                <div class="btn-group">
                    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"
                            aria-haspopup="true" aria-expanded="false">
                        排序:{{article.limit["sort"]}} <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu">
                        <li><a href="" ng-click="article.changeLimit('sort','article_id')">文章ID</a></li>
                        <li><a href="" ng-click="article.changeLimit('sort','article_sort')">文章排序</a></li>
                        <li><a href="" ng-click="article.changeLimit('sort','article_click')">文章点击量</a></li>
                        <li><a href="" ng-click="article.changeLimit('sort','article_reply')">文章评论量</a></li>
                    </ul>

                </div>
                <div class="btn-group">
                    <button type="button" class="btn btn-danger"  data-toggle="modal" data-target="#del_confirm">删除所选</button>


                    <!-- Modal -->
                    <div class="modal fade" id="del_confirm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                    <h4 class="modal-title" id="myModalLabel">确认删除</h4>
                                </div>
                                <div class="modal-body">
                                    <h2>此操作危险，确认继续 ？</h2>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                                    <button type="button" class="btn btn-danger" ng-click="article.deleteGroup()">删除</button>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
                <label class=" pull-right">
                    <div class="checkbox">
                        <label>
                            <input type="checkbox" ng-click="article.sortDesc()"> 倒序
                        </label>
                    </div>
                    <div class="form-group ">
                        <label class="sr-only"></label>
                        <input type="text" class="form-control" placeholder="按标题查找" ng-model="article.searchKey">
                    </div>
                    <button class="btn btn-default" ng-click="article.changeLimit('search',article.searchKey)">搜索
                    </button>
                </label>
            </form>

            <hr>
            <table class="table table-hover table-condensed table-bordered">
                <tr>

                    <th><span class="glyphicon glyphicon-file" aria-hidden="true"></span> 文章标题</th>
                    <th><span class="glyphicon glyphicon-th-large" aria-hidden="true"></span> 文章分类</th>
                    <th><span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span> 点击量</th>
                    <th><span class="glyphicon glyphicon-time" aria-hidden="true"></span> 创建时间</th>
                    <th><span class=" glyphicon glyphicon-link" aria-hidden="true"></span> 操作</th>
                </tr>
                <tr ng-repeat="single in article.articleData" class="article_item">
                    <td ><a href="/index_articleDetail/{{single.article_id}}" ng-bind="single.article_title"></a></td>
                    <td ng-bind="single.class_name"></td>
                    <td ng-bind="single.article_click"></td>
                    <td ng-bind="single.article_create_date"></td>
                    <td>
                        <input type="checkbox" ng-click="article.opGroup(single.article_id)">
                        <a class="btn btn-info btn-xs" href="/user_uArticle/{{single.article_id}}">修改</a>
                        <button type="button" class="btn btn-danger btn-xs"  data-toggle="modal" data-target="#del_confirm_{{single.article_id}}">删除</button>

                        <!-- Modal -->
                        <div class="modal fade" id="del_confirm_{{single.article_id}}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                            <div class="modal-dialog">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                        <h4 class="modal-title" >确认删除</h4>
                                    </div>
                                    <div class="modal-body">
                                        <h2>此操作危险，确认继续 ？</h2>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                                        <button type="button" class="btn btn-danger" ng-click="article.delete(single.article_id)">删除</button>
                                    </div>
                                </div>
                            </div>
                        </div>


                    </td>
                </tr>
            </table>

            <nav>
                当前第 {{ article.nowPage }} 页 | 总计 {{ article.totalPage }} 页
                <ul class="pager">
                    <li><a ng-if="article.nowPage>1"
                           href="" ng-click="article.previousPage()">前一页</a></li>

                    <li><a ng-if="article.nowPage<article.totalPage"
                           href="" ng-click="article.nextPage()">下一页</a></li>
                </ul>
            </nav>

            <hr>
        </div>
    </div>
</div>